<template>
  <div class="btn-more">
    <span><a href="javascript:;">了解更多</a></span>
    <img
      class="right"
      :src="isOrange ? $utils.getImg('orange-right') : $utils.getImg('white-right')"
      width="15px"
      height="15px"
      alt="more"
    />
  </div>
</template>

<script setup>
defineOptions({
  name: 'BtnMore'
})
defineProps({
  borderColor: {
    type: String,
    default: '#ff7200'
  },
  isOrange: {
    type: Boolean,
    default: true
  },
  color: {
    type: String,
    default: '#ff7200'
  }
})
</script>

<style lang="scss" scoped>
.btn-more {
  box-sizing: border-box;
  display: inline-block;
  width: 150px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: solid 1px v-bind(borderColor);
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  a {
    color: v-bind(color);
    text-decoration: none;
  }
  color: v-bind(borderColor);
  .right {
    transition: 0.3s;
  }
  &:hover .right {
    transform: translateX(5px);
  }
}
</style>
